<#--
        Copyright 2007 Jive Software Licensed under the Apache License,
        Version 2.0 (the "License"); you may not use this file except in
        compliance with the License. You may obtain a copy of the License at
        http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable
        law or agreed to in writing, software distributed under the License is
        distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
        either express or implied. See the License for the specific language
        governing permissions and limitations under the License.
        -->\
	
    <#assign title = action.getText('plugin.waw.memberMap.title') />
    <#assign view = 'members-community-tab' />
    <html>
    <head>
        <title>${title}</title>
        <style type="text/css" media="screen">
            @import "<@ww.url value='/styles/jive-community.css' includeParams='none'/>";
        </style>
        <content tag="breadcrumb">
            <@ww.action name="community-breadcrumb" executeResult="true" ignoreContextParams="true">
            	<@ww.param name="communityID" value="${community.ID?c}" />
            	<@ww.param name="view" value="'${view}'" />
        	</@ww.action>
        </content>
        
        <!-- The Google Map Code -->
	    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=${JiveGlobals.getJiveProperty("plugin.waw.memberMap.key")}"
	            type="text/javascript"></script>	            
    </head>
    <body onunload="GUnload()">
    
    <#include '/template/global/include/community-header.ftl' />
    
    <!-- BEGIN main body -->
	<div id="jive-body-main">
    	<div id="jive-body-maincol-container">
        
			<!-- BEGIN main body column -->
	        <div id="jive-body-maincol">       
			    <table width="800px" align="center">
			      <tr>
			        <td width="200px">
			        	<div id="members" style="overflow:auto; width:190px; height:350px; "></div>
			        </td>
			        <td width="750px" valign="top">
			           <div id="map" style="width: 740px; height: 400px"></div>
			        </td>
			      </tr>
			    </table>
		    </div>
    	</div>
    </div>
    
	   <!-- Script to Load the Google Map -->
	   <script type="text/javascript">
	   //<![CDATA[
	  // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var member_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;

      var members = [
      	<#list membersInCommunity as member>
      	{"lat":"${member.getLat()}", 
      	 "lng":"${member.getLng()}", 
      	 "username":"${member.getUsername()}", 
      	 "name":"${member.getName()}", 
      	 "display": "${member.getDisplay()}",
      	 "avatarID":"${member.getAvatarID()}",
      	 "profile": [
      	 <#list member.profile as field>
      	 	{"name":"${field.getName()}","value":"${field.getValue()}"}<#if field_has_next>,</#if>
      	 </#list>
      	 	]}<#if member_has_next>,</#if>
		</#list>
		];
		
		
      // A function to create the marker and set up the event window
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        return marker;
      }                
 
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
      
      // This function constructs rows in the table showing the member.profile fields
      function displayProfile(member)
      {
	      var retString = "";
	      var profile = member.profile;
	      for(var i=0; i < profile.length; i++)
	      {
	      	retString += "<tr><td>"+profile[i].name+": </td><td>"+profile[i].value+"</td></tr>";
	      }
	      return retString;
      }
	  
      if (GBrowserIsCompatible()) {
      				
        var map = new GMap2(document.getElementById("map"));
	        map.setCenter(new GLatLng(37.718590, -97.382813), 4);
	        map.addControl(new GLargeMapControl());
	        map.addControl(new GMapTypeControl());
	        map.addControl(new GOverviewMapControl());
	        
	
	        // Create a base icon for all of our markers that specifies the
	        // shadow, icon dimensions, etc.
	        var baseIcon = new GIcon();
	        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	        baseIcon.iconSize = new GSize(20, 34);
	        baseIcon.shadowSize = new GSize(37, 34);
	        baseIcon.iconAnchor = new GPoint(9, 34);
	        baseIcon.infoWindowAnchor = new GPoint(9, 2);
	        baseIcon.infoShadowAnchor = new GPoint(18, 25);
				      
		    // Plot the members 
		    var bounds = new GLatLngBounds();
		    if(members.length == 0) {
		    	// indicate no members in this community
		    	document.getElementById("members").innerHTML =  "<strong>There are no members in this community!</strong>";
		    }
		    else{
		        for (var i=0; i<members.length; i++) {
		          if (members[i].display == "yes" && members[i].lat != "") 
		          {
		              var point = new GLatLng(members[i].lat, members[i].lng);
			          bounds.extend(point);
			          var info_html = "<table><tr><td><img src='/clearspacex/people/"+members[i].username+"/avatar/64.png?a="+members[i].avatarID+"'></td>"+
			          						 "<td><table><tr><td>Name:</td><td><a href='/clearspacex/people/"+members[i].username+"'>"+members[i].name+"</a></td></tr>"+
			          						 		   displayProfile(members[i]) +
			          						 		   "</table></td></tr></table>";
		
			          var marker = createMarker(point, info_html);
			          map.addOverlay(marker);
			          // add a line to the members html
			    	  member_html += "<tr><td align='center'><img src='/clearspacex/people/"+members[i].username+"/avatar/20.png?a="+members[i].avatarID+"'/></td><td><a href='javascript:myclick(" + i + ")'>" + members[i].name + "</a></td></tr>"; 		          
			        } 
			        else 
			        {
			          member_html += "<tr><tr><td align='center'><img src='/clearspacex/people/"+members[i].username+"/avatar/20.png?a="+members[i].avatarID+"'/></td><td>" + members[i].name + "</td></tr>";
					} 
		        }
		        // put the assembled member list in the members table
		        document.getElementById("members").innerHTML = "<b>Community Members</b><table>" + member_html + "</table>"; 
	        }
		    map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds)-1);	 
		    map.savePosition();
		  }
	   else {
	   	alert("Browser not compatible");
	   }
	   
	   //]]>
	  </script>
    </body>
    </html>
